package ;

import easelhx.display.Container;
import easelhx.display.Graphics;
import easelhx.display.Shape;
import easelhx.display.Text;
import easelhx.events.MouseEvent;
import easelhx.geom.Point;
import easelhx.utils.Ticker;
import js.Lib;

/**
 * ...
 * @author 
 */

class GlobalToLocal1Example extends Example
{

	private var _mouseIsDown:Bool;
	private var _mouseX:Float;
	private var _mouseY:Float;

	private var spin1:Container;		// nested invisble container to generate a spirograph effect
	private var spin2:Container;		// nested invisble container to generate a spirograph effect

	private var shape:Shape;		// drawing shape
	private var color:String;		// drawing color
	private var lastPt:Point;		// last draw position
	private var text:Text;
	private var graphics:Graphics;
	private var count:Int;
	
	public function new() 
	{
		super();
	}
	
	override public function run():Void 
	{
		super.run();
		
		count = 0;
		
		// attach mouse handlers directly to the source canvas
		// better than calling from canvas tag for cross browser
		canvas.onmousemove = mouseMove;
		canvas.onmousedown = mouseDown;
		canvas.onmouseup = mouseUp;

		text = new Text("Click and Drag", "36px Arial", "#777777");
		text.x = 360; text.y = 200;
		stage.addChild(text);

		// shape to draw vector data into:
		shape = new Shape();
		shape.x = 41;		//position in parent container
		graphics = shape.graphics;

		// middle spinner:
		spin2 = new Container();
		spin2.addChild(shape);
		spin2.x = 303;		//position in parent container

		// outside spinner:
		spin1 = new Container();
		spin1.addChild(spin2);

		// center it on the stage:
		spin1.x = canvas.width/2;
		spin1.y = canvas.height/2;
		stage.addChild(spin1);

		// start the tick and point it at the window so we can do some work before updating the stage:
		Ticker.setFPS(30);
		Ticker.addListener(this);
	}
	
	private function tick() : Void
	{
		// update rotation:
		spin1.rotation += 10;
		spin2.rotation += -7;
		shape.rotation += 3;

		if(_mouseIsDown) {
			var color = Graphics.getHSL(
				Math.cos((count++)*0.01) * 180,
				100,
				50,
				1.0);

			// set up our drawing properties:
			graphics.setStrokeStyle(Math.random()*20+2,"round").beginStroke(color);

			// start the line at the last position:
			graphics.moveTo(lastPt.x,lastPt.y);

			// calculate the new position in the shape's local coordinate space:
			lastPt = shape.globalToLocal(_mouseX,_mouseY);

			// draw the line, and close the path:
			graphics.lineTo(lastPt.x,lastPt.y);
		}

		// update the stage:
		stage.update();
	}

	//start drawing
	private function mouseDown(e:MouseEvent) : Void
	{
		if (e==null) { e = Reflect.field(Lib.window, "event"); }
		stage.removeChild(text);
		_mouseIsDown = true;
		
		// set up the first point in the new draw, and choose a random color:
		lastPt = shape.globalToLocal(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
		//color = "#"+(Math.random()*0xFFFFFF|0).toString(16);

		// clear the cache, so the vector data is drawn each tick:
		shape.uncache();
	}

	//stop drawing
	private function mouseUp() : Void
	{
		_mouseIsDown = false;

		// cache the vector data to a saved canvas, so we don't have to render it each tick:
		shape.cache(-800,-800,1600,1600);
	}

	//update mouse positions
	private function mouseMove(e:MouseEvent) : Void
	{
		if (e==null) { e = Reflect.field(Lib.window, "event"); }
		_mouseX = e.pageX-canvas.offsetLeft;
		_mouseY = e.pageY-canvas.offsetTop;
	}
	
}